<template>
  <view
    class="kd-order-grabbing-page"
    :class="{'bottom-area': isIphoneX}"
  >
    <customNavBar :pageTitle="'抢单大厅'" />
    <scroll-view
      scroll-y
      class="scroll-content"
      refresher-enabled
      :style="{height: scrollHeight + 'px'}"
      :refresher-triggered="triggered"
      @refresherrefresh="handleRefresher"
      >

      <view
        v-if="!nearbyOrdersList.length"
        class="no-data"
      >
        <van-empty description="暂无数据"/>
      </view>

      <view
        v-for="(item, index) in nearbyOrdersList"
        :key="index"
        class="order-item-wrap mb-20"
        @click="handleToOrderDetail(item)"
      >
        <view class="order-top-info">
          <view class="time">下单时间：{{item.pay_str + '前'}}</view>
          <view class="status">
            寄件费：
            <text class="val">{{ item.total_price }}元</text>
          </view>
        </view>

        <view class="item-content">
          <view class="left">
            <view class="send-wrap mb-20">
              <view class="icon">寄</view>
              <view class="send-info">
                <view class="top-name">
                  <view class="name">{{ item.a1name }}</view>
                  <uni-tag
                    :text="'距离：' + item.rangenum + 'km'"
                    type="default"
                    size="small"
                  ></uni-tag>
                </view>
                <view class="bottom-address">{{ item.a1areaaddress + item.a1name_address + item.a1doornumber }}</view>
              </view>
            </view>

            <view class="send-wrap receiving-wrap">
              <view class="icon">收</view>
              <view class="send-info">
                <view class="top-name">
                  <view class="name">{{ item.a2name }}</view>

                  <uni-tag
                    :text="'距离：' + item.rangenum + 'km'"
                    type="default"
                    size="small"
                  ></uni-tag>

                </view>
                <view class="bottom-address">{{ item.a2areaaddress + item.a2name_address + item.a2doornumber }}</view>
              </view>
            </view>
          </view>

          <view class="right">
            <uni-icons
              type="right"
              size="18"
              color="#BFBFC1"
            ></uni-icons>
          </view>
        </view>

        <view class="item-option-bottom">
          <button
            @click.stop="handleTakingOrders(item)"
            type="primary"
            class="receiving-btn"
          >我要接单
          </button>
        </view>

      </view>

      <view
        class="loading"
        v-if="loading"
      >
        <van-loading
          color="#0091FF"
          size="34px"
        />
      </view>

    </scroll-view>


    <van-dialog id="van-dialog"/>
    <van-toast id="van-toast"/>

    <KdTabBar
      ref="KdTabBar"
    />
  </view>
</template>

<script>
import Toast from "../../wxcomponents/vant/toast/toast";

const app = getApp()
import KdTabBar from "@/components/KdTabBar/index.vue";
import customNavBar from "@/components/customNavBar/index.vue";

export default {
  data() {
    return {
      activeTab: 0,
      locationPermissions: true,
      isIphoneX: false,
      loading: false,
      isNullData: false,
      nearbyOrdersList: [],
      latitude: '',
      longitude: '',
      triggered: false,
      scrollHeight: 500
    };
  },
  components: {
    KdTabBar,
    customNavBar
  },
  methods: {
    handleChangeOrderStatus(res) {
      console.log(res);
    },
    handleToOrderDetail(item) {
      const {
        oid
      } = item

      uni.navigateTo({
        url: '/pages/kdOrder/detail?oid=' + oid + '&source=orderGrabbingHall'
      })
    },
    handleTakingOrders(item) {
      const {
        oid
      } = item

      Toast.loading({
        message: '加载中',
        mask: true,
        duration: 0,
        zIndex: 9999999,
        forbidClick: true
      })
      app.request({
        oid
      }, '/api/logistics/order/rob').then((res) => {
        const {
          code,
          data,
          msg
        } = res

        if (code === 1) {
          Toast('接单成功')
          this.handleGetList()
        } else {
          Toast(msg)
        }
      })
    },
    handleGetNearbyOrders() {
      const {
        latitude,
        longitude
      } = this

      if (latitude && longitude) {
        app.request({
          lat: latitude,
          lnt: longitude
        }, '/api/logistics/terminal/search_order').then((res) => {
          const {
            code,
            data,
            msg
          } = res

          if (code === 1) {
            this.nearbyOrdersList = data
            this.triggered = false
          } else {
            Toast(msg)
            this.triggered = false
          }
        })
      }
    },
    handleGetList() {
      const {
        latitude,
        longitude
      } = this

      if (latitude && longitude) {
        this.handleGetNearbyOrders()
      }  else {
        if (app.globalData.latitude && app.globalData.longitude) {
          this.longitude = app.globalData.longitude
          this.latitude = app.globalData.latitude
          this.handleGetNearbyOrders()
        } else {
          const that = this

          uni.getLocation({
            success(res) {
              const {
                latitude,
                longitude
              } = res

              app.globalData.longitude = longitude
              app.globalData.latitude = latitude
              that.longitude = longitude
              that.latitude = latitude
              that.handleGetNearbyOrders()
            },
            fail(res) {
              that.locationPermissions = false
            }
          })

        }
      }
    },
    handleRefresher() {
      this.triggered = true

      if (!this.locationPermissions ) {
        this.triggered = false
        return
      }

      this.handleGetList()
    },
    handleGetScrollHeight() {

    }
  },
  onLoad() {
    this.isIphoneX = app.globalData.isIphoneX
    this.handleGetList()
    this.handleGetScrollHeight()
  },
  mounted() {
    const that = this
    const query = uni.createSelectorQuery().in(this.$refs.KdTabBar)
    query.select("#kdTabBar").boundingClientRect((data) => {
      console.log(data);
      const {
        height
      } = data
      const windowInfo = uni.getWindowInfo()
      const {
        windowHeight
      } = windowInfo

      that.scrollHeight = windowHeight - height
    }).exec();
  },
}
</script>

<style lang="scss">
.bottom-area {
  padding-bottom: 130rpx;
}

.kd-order-grabbing-page {
  width: 100%;
  min-height: 100vh;
  background-color: #F9F9F9;
  padding-bottom: 100rpx;
  box-sizing: border-box;

  .scroll-content {
    padding-top: 20rpx;
    box-sizing: border-box;

    .mb-20 {
      margin-bottom: 20rpx;
    }

    .order-item-wrap {
      position: relative;
      width: 100%;
      padding-bottom: 22rpx;
      background-color: #fff;

      .order-top-info {
        width: 100%;
        height: 84rpx;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 22rpx;
        box-sizing: border-box;
        margin-bottom: 22rpx;

        .time {
          color: #999;
          font-size: 24rpx;
        }

        .status {
          font-size: 24rpx;

          .val {
            color: #ea9924;
            font-weight: bold;
          }
        }
      }

      .item-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 22rpx;
        box-sizing: border-box;
      }

      .item-option-bottom {
        display: flex;
        justify-content: center;
        padding: 0 18rpx;
        box-sizing: border-box;
        margin-top: 22rpx;

        .receiving-btn {
          display: flex;
          justify-content: center;
          align-items: center;
          width: 714rpx;
          height: 68rpx;
          border-radius: 8rpx;
          color: #fff;
          background-color: #1989fa;
          border-color: #1989fa;
          font-size: 26rpx;
        }
      }

      .order-status {
        position: absolute;
        right: 30rpx;
        top: 20rpx;
        font-size: 24rpx;
        color: #f0ad4e;
        font-weight: bold;
      }
    }

    .left {
      .mb-20 {
        margin-bottom: 20rpx;
      }

      .send-wrap {
        display: flex;
        align-items: center;

        .icon {
          width: 50rpx;
          height: 50rpx;
          color: #fff;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 20rpx;
          background-color: #f0ad4e;
          font-size: 22rpx;
        }

        .send-info {
          .top-name {
            display: flex;
            align-items: center;
            margin-bottom: 8rpx;

            .name {
              font-size: 26rpx;
              margin-right: 22rpx;
            }
          }

          .bottom-address {
            color: #999999;
            font-size: 22rpx;
          }
        }
      }

      .receiving-wrap {
        .icon {
          width: 50rpx;
          height: 50rpx;
          color: #fff;
          border-radius: 50%;
          display: flex;
          justify-content: center;
          align-items: center;
          margin-right: 20rpx;
          background-color: #157FB9;
          font-size: 22rpx;
        }
      }
    }

  }
}
</style>
